<template>
  <div class="previewReport">
    <!-- 简报预览区 -->
    <div id="pdfDom">
      <div class="report-header">
        <h1 style="color:#000">{{ reportInfo.template.headerBig }}</h1>
        <p>第{{ reportInfo.template.reportCode }}次</p>
        <div class="headerLine">
          <span>{{ reportInfo.template.reportUnit }}</span>
          <span>{{ reportInfo.template.reportTime }}</span>
        </div>
      </div>
      <div class="report-content">
        <h2>{{ reportInfo.fireBase.fireCode }}号火情点简报</h2>
        <div class="content-first">
          <h3>一、火情监测信息</h3>
          <div class="firstItem">
            <span>时间：</span>
            <div>
              <p>{{ reportInfo.fireBase.time }}</p>
            </div>
          </div>
          <div class="firstItem">
            <span>地点：</span>
            <div>
              <p>{{ reportInfo.fireBase.place }}</p>
              <p>
                坐标：{{ reportInfo.fireBase.lon }}°E,&nbsp;{{ reportInfo.fireBase.lat }}°N
              </p>
              <p>距离：{{ reportInfo.fireBase.distance }}</p>
              <p>方位角：{{ reportInfo.fireBase.angle }}</p>
            </div>
          </div>
          <div class="firstItem">
            <span>高程：</span>
            <div>
              <p>{{ reportInfo.fireBase.height }}</p>
            </div>
          </div>
          <!-- <div class="firstItem">
            <span>热点数：</span>
            <div>
              <p>{{ reportInfo.fireBase.hotNum }}</p>
            </div>
          </div> -->
          <div class="firstItem">
            <span>植被分布：</span>
            <div>
              <p>{{ reportInfo.fireBase.veg }}</p>
            </div>
          </div>
        </div>
        <div class="content-second">
          <h3>二、火情复核信息</h3>
          <div class="secondItem">
            <span>复核情况：</span>
            <div>
              <p>{{ reportInfo.checkRes.words }}</p>
            </div>
          </div>
          <div class="secondItem">
            <span>伤亡情况：</span>
            <div>
              <span>死亡：{{ reportInfo.checkRes.death ? reportInfo.checkRes.death + "人," : "不明," }}</span>
              <span>受伤：{{ reportInfo.checkRes.hurt ? reportInfo.checkRes.hurt + "人," : "不明," }}</span>
              <span>失踪：{{ reportInfo.checkRes.miss ? reportInfo.checkRes.miss + "人," : "不明," }}</span>
            </div>
          </div>
        </div>
        <div class="content-third">
          <h3>三、作战辅助信息</h3>
          <div class="thirdItem" v-for="(itemOne, indexOne) of reportInfo.poiList" :key="indexOne" >
            <h4> （{{ daxie[indexOne] }}）周边{{ itemOne.group }}<span v-show="itemOne.children.length === 0">无</span>
            </h4>
            <div class="tableBox" v-for="(itemTwo, indexTwo) of itemOne.children" :key="indexTwo" >
              <h5> 表{{ indexOne + 1 }}-{{ indexTwo + 1 }} 事发地方圆{{ radius }}公里内{{ itemTwo.type }}情况表 </h5>
              <el-table class="elTable" :data="itemTwo.dataList">
                <el-table-column
                  v-for="(itemTheader, indexTheader) of itemTwo.therader"
                  :key="indexTheader"
                  :prop="itemTheader.prop"
                  :label="itemTheader.label"
                >
                </el-table-column>
              </el-table>
              <p> 注：本表为方圆{{ radius }}公里内前10位距事发点距离最短的{{ itemTwo.type }} </p>
            </div>
          </div>
        </div>
        <div class="content-forth" v-if="reportInfo.imgUrl">
          <h3>四、火情地图</h3>
          <img :src="reportInfo.imgUrl" alt="" />
          <p>图1-1 事发地遥感卫星影像图</p>
        </div>
      </div>
      <div class="report-footer">
        <div class="footerLine">
          <span>编辑：{{ reportInfo.template.reporter }}</span>
          <span>联系方式：{{ reportInfo.template.phone }}</span>
        </div>
      </div>
    </div>
    <div class="funcBtn">
      <p @click="getPdf()" :style="{ cursor: countDown > 0 ? 'not-allowed' : 'pointer' }" >
        <img class="mouseout" src="/images/fireReport/icon/xiazai.png" alt="" />
        <img class="mousein" src="/images/fireReport/icon/xiazai2.png" alt="" />下载<span v-show="countDown > 0">({{ countDown }})</span>
      </p>
      <p @click="closePreview(false)">
        <img class="mouseout" src="/images/fireReport/icon/close.png" alt="" />
        <img class="mousein" src="/images/fireReport/icon/close2.png" alt="" />关闭
      </p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
// import html2Canvas from 'html2canvas'
// import JsPDF from 'jspdf'
export default {
  name: "previewReport",
  data() {
    return {
      daxie:["一", "二", "三", "四", "五"],
      countDown:0,
      radius:3,
    };
  },
  props: ["reportInfo"],
  methods:{
    // 下载PDF-后端
    getPdf(){
      let obj = {};
      obj.angle = this.reportInfo.fireBase.angle
      obj.distance = this.reportInfo.fireBase.distance;
      obj.fireCode = this.reportInfo.fireBase.fireCode
      obj.fireId = this.reportInfo.fireId;
      obj.height = this.reportInfo.fireBase.height;
      obj.hotNum = this.reportInfo.fireBase.hotNum;
      if( !this.reportInfo.checkRes.death && !this.reportInfo.checkRes.hurt && !this.reportInfo.checkRes.miss){
        obj.hurt = "不明"
      }else{
        let death = this.reportInfo.checkRes.death ? this.reportInfo.checkRes.death + '人' : '不明'
        let hurt = this.reportInfo.checkRes.hurt ? this.reportInfo.checkRes.hurt + '人' : '不明'
        let miss = this.reportInfo.checkRes.miss ? this.reportInfo.checkRes.miss + '人' : '不明'
        obj.hurt = `死亡${death}, 受伤${hurt}, 失踪${miss}`
      }
      obj.lat = this.reportInfo.fireBase.lat;
      obj.lon = this.reportInfo.fireBase.lon;
      obj.phone = this.reportInfo.template.phone;
      obj.place = this.reportInfo.fireBase.place;
      obj.poiRadius = this.radius * 1000;
      obj.reportCode = this.reportInfo.template.reportCode;
      obj.reportDate = this.reportInfo.template.reportTime
      obj.reportTitle = this.reportInfo.template.headerBig;
      obj.reportUnit = this.reportInfo.template.reportUnit;
      obj.reporter = this.reportInfo.template.reporter;
      obj.fireId = '32';
      obj.stId = this.reportInfo.imgId;
      obj.time = this.reportInfo.fireBase.time;
      obj.veg = this.reportInfo.fireBase.veg;
      obj.words = this.reportInfo.checkRes.words;
      axios({
        url:`${window.huoqingApiUrl}/api/special-report/fire/create`,
        method:"post",
        data:obj
      }).then(res=>{
        window.open(`${window.huoqingApiUrl}/api/special-report/download/${res.data}`, '_blank');
      });
    },
    // 关闭预览
    closePreview(){
      this.$emit('closePreview', false)
    },
  },
};
</script>

<style lang="stylus">
.previewReport{
  #pdfDom{
    .content-third .thirdItem .tableBox{
      .elTable{
        width:90%;
        margin:auto;
        border:0;
        border-left:1px solid #000;
        border-top:1px solid #000;
        margin-bottom:20px;
        th, tr, td{
          color:#000;
          border: 0;
          border-right:1px solid #000;
          border-bottom:1px solid #000;
          font-size: 16px;
          font-family: FangSong;
          color:#000;
        }
        tbody tr:hover>td { 
          background-color:unset!important
        }
      }
    }
  }
}
</style>
<style lang="stylus" scoped>
#pdfDom >>> div{
    color:#000
}
.previewReport {
  position:fixed;
  z-index:999;
  left:0;
  right:0;
  bottom:0;
  top:0;
  margin:auto;
  width:1240px;
  height:870px;
  color:#000;
  #pdfDom{
    background:#fff;
    width:1240px;
    height:840px;
    overflow: auto;
    text-align: left;
    box-sizing: border-box;
    padding:100px;
    font-family: FangSong;
    line-height:46px;
    color: #000;
    div,p,span{
        color:#000;
    }
    &::-webkit-scrollbar {
      display: none;
    }
    .report-header{
      border-bottom: 2px solid #fe0000;
      text-align: center;
      color: #000;
      h1{
        font-size: 48px;
        color:#ff0000;
        font-family: SimHei;
      }
      p{
        font-size: 21px;
        line-height:21px;
        margin: 68px 0 70px;
        color: #000;
      }
      .headerLine{
        font-size: 21px;
        line-height:45px;
        display: flex;
        justify-content: space-between;
        border-bottom:5px solid #fe0000;
        margin-bottom:1px;
      }
    }
    .report-content{
      font-size: 21px;
      color: #000;
      h2, h3, h4, h5{
        font-weight: 900;
        color: #000;
      }
      h2{
        font-size: 29px;
        line-height:29px;
        text-align: center;
        font-family: SimHei;
        margin:64px 0 69px;
        color: #000;
      }
      h3{
        font-size: 21px;
        font-family: SimHei;
      }
      h4{
        font-size: 21px;
        text-indent: 2em;
      }
      h5{
        font-size: 16px;
        text-align: center;
        line-height:22px;
      }
      .firstItem, .secondItem{
        display: flex;
        justify-content: flex-start;
        color: #000;
        div{
            color:#000;
            p{
                color:#000;
            }
        }
        span{
          text-indent: 2em; 
          white-space: nowrap;
          font-weight: 900;
          color: #000;
        }
      }
      .content-third .thirdItem .tableBox{
          color: #000;
        p{
          font-size: 16px;
          line-height:36px;
          text-indent: 5em;
          color: #000;
        }
      }
      .content-forth{
        img{
          display: block;
        }
        p{
          font-size: 16px;
          text-align: center;
          line-height:50px;
          color: #000;
        }
      }
      
    }
    .report-footer{
      padding-top:1px;
      border-top: 2px solid #fe0000;
      color: #000;
      .footerLine{
        font-size: 21px;
        display: flex;
        justify-content: space-between;
        border-top:5px solid #fe0000;
      }
    }
  }
  .funcBtn{
    color:#fff;
    padding-top:5px;
    p{
      float:right;
      margin-left: 20px;
      cursor: pointer;
      width: 102px;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      opacity: 1;
      background: #042039;
      border: 1px solid #17d0ff;
      border-radius: 3px;
      color: #17d0ff;
      img{
        width:18px;
        height:18px;
        vertical-align: middle;
        margin-right:8px;
      }
      .mousein{
        display:none;
      }
    }
    p:hover{
      background: #05718c;
      color:#fff;
      .mousein{
        display:inline-block;
      }
      .mouseout{
        display:none;
      }
    }
  }
  
}
</style>